<template>
  <div class="movieContainer">
    <Ad v-show="$store.state.showAd" />
    <ul class="nav">
      <router-link tag="li" class="city" to="/city">
        {{$store.state.city.name}}
      </router-link>
      <router-link tag="li" active-class="active" to="/home/movie/hotshowing">热映</router-link>
      <router-link tag="li" active-class="active" to="/home/movie/theater">影院</router-link>
      <router-link tag="li" active-class="active" to="/home/movie/comingsoon">待映</router-link>
      <router-link tag="li" active-class="active" class="classic" to="/home/movie/classic">经典电影</router-link>
      <router-link tag="li" to="/search">
        <van-icon name="search" class="search" />
      </router-link>
    </ul>

    <router-view>

    </router-view>
  </div>
</template>

<script>
import Ad from "@/components/Ad"
export default {
  components: {
    Ad
  },
  activated() {
    console.log("激活")
  },
  deactivated() {
    console.log("失活")
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/mixin.scss";
.movieContainer {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .nav {
    z-index: 1;
    background: white;
    height: 44px;
    @include border1px(#666666);
    display: flex;
    li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
      font-size: 15px;
      color: #666666;
    }
    .city {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        right: 0px;
        top: 20px;
        border-width: 4px;
        border-color: #666666 transparent transparent transparent;
        border-style: solid;
      }
    }
    .classic {
      flex: 1.3;
    }
    .active {
      color: black;
      font-size: 17px;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: 50%;
        width: 20px;
        height: 2px;
        background: red;
        transform: translateX(-50%);
      }
    }

    .search {
      font-size: 25px;
      color: #f03d37;
    }
  }
}
</style>

